<template>

	<div>
		<div class="video">
			<video id="video" width="100%" height="100%">
			</video>
		</div>


		<!-- <div class="hello" id="hello">
		

		</div> -->
		<canvas id="canvas" style="display: none;"></canvas>
	</div>
</template>

<script>
	export default {


		data() {
			return {
				intervalId: null,
				intervalId2: null,
				flag: false,
				mes: null,
				timeoutId: null
				//base64Data:null

			}
		},
		methods: {

			face() {
				//
				this.$notify({
					type: 'primary',
					message: '请展示完整人脸',
					duration: 4000
				});

				//访问用户媒体设备的兼容方法
				function getUserMedia(constraints, success, error) {
					if (navigator.mediaDevices.getUserMedia) {
						//最新的标准API
						navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
					} else if (navigator.webkitGetUserMedia) {
						//webkit核心浏览器
						navigator.webkitGetUserMedia(constraints, success, error)
					} else if (navigator.mozGetUserMedia) {
						//firfox浏览器
						navigator.mozGetUserMedia(constraints, success, error);
					} else if (navigator.getUserMedia) {
						//旧版API
						navigator.getUserMedia(constraints, success, error);
					}
				}

				let video = document.getElementById('video');
				let canvas = document.getElementById('canvas');
				let context = canvas.getContext('2d');

				let success = (stream) => {

					//兼容webkit核心浏览器
					let CompatibleURL = window.URL || window.webkitURL;
					//将视频流设置为video元素的源
					console.log(stream);

					//video.src = CompatibleURL.createObjectURL(stream);
					video.srcObject = stream;
					video.play();
					const tracks = stream.getTracks();

					this.intervalId2 = setInterval(() => {
						console.log(this.flag)
						if (this.flag) {

							tracks[0].stop();
							clearInterval(this.intervalId2);
						}

					}, 500);


					this.timeoutId = setTimeout(() => {
						clearInterval(this.intervalId);
						clearInterval(this.intervalId2);
						tracks[0].stop();
						//
						this.$toast.fail({
							message: '人脸录入超时，未采集到的有效人脸！'
						});
						this.$router.go(-1);//因为直接回退上一层，比根据用户身份做判断再路由省事
						console.log("========addFace----fail========");
						
						
						
					}, 8000);



				}

				function error(error) {
					console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
				}
				if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
					//调用用户媒体设备, 访问摄像头
					getUserMedia({
						video: {
							width: 1280,
							height: 800
						}
					}, success, error);
					//getUserMedia({video : {width: 4000, height: 3000}}, success, error);
				} else {
					alert('不支持访问用户媒体');
				}


				let timeout = setTimeout(() => {

					context.drawImage(video, 0, 0, 120, 100);
					let base64Data = canvas.toDataURL(); //转base64
					this.addUser(base64Data);



					this.intervalId = setInterval(() => {
						context.drawImage(video, 0, 0, 160, 100);
						let base64Data = canvas.toDataURL(); //转base64

						this.addUser(base64Data);

						console.log("base64Data====", base64Data);

					}, 3000);

				}, 1000);






			},
			addUser(img) {
				this.axios.post('http://localhost:8088/face/addUser', {
						'img': img,
						userId: this.$store.getters.getUser.id
					})
					.then((response) => {
						console.log("response=================", response)
						console.log("face_token===========", response.data.result.face_token);
						if (response.data.result.face_token) {

							//更新用户人脸验证 Y
							this.axios.post('https://mianmianshi.com/cms/temple/client/updateUser', {
								'where': {
									id: this.$store.getters.getUser.id
								},
								'update': {
									face: "Y"
								}
							});

							clearInterval(this.intervalId);
							clearTimeout(this.timeoutId);
							this.flag = true;
							
							this.$toast.success({
								message: '人脸录入成功！'
							});
							//
							this.$router.push("login"); //录入成功跳转到登陆页面

						} else {
							
							this.$router.push("consumer");
							this.$toast.fail({
								message: '服务繁忙，请稍后重试！'
							});
						
						}

					})
					.catch(function(error) {
						console.log(error);
						this.$router.push("consumer");
						this.$toast.fail({
							message: '服务繁忙，请稍后重试！'
						});
					});
			}






		}, 
		created() {


		},
		mounted() {
			this.face();
		},
		destroyed() {
			clearInterval(this.intervalId2);
			clearInterval(this.intervalId);
			console.log(this.intervalId);
			//clearInterval(this.intervalId2);


		}


	}
</script>

<style>
	.video {
		/* 	width: 100%;
		height: 100%; */
		position: absolute;
		z-index: -1;
	}

	.hello {
		margin-top: 200px;
		margin-left: 320px;
		width: 50%;
		height: 50%;
		border: darkred solid 2px;
		position: absolute;
		z-index: -1;
	}
</style>
